<template>
  <el-pagination background v-show="total > size"
                 :layout="layout"
                 :page-size="size"
                 @size-change="sizeChange"
                 :current-page="curr"
                 :page-sizes="pageSizes"
                 class="bsb"
                 @current-change="currChange"
                 :total="total">
    <slot>
      <el-button class="sure">确定</el-button>
    </slot>
  </el-pagination>
</template>

<script>
  export default {
    name: "GlPagination",
    props: {
      // 列表总数
      total: {
        type: Number,
        default: 0
      },
      // 显示的控件，见elements ui
      layout: {
        type: String,
        default: 'prev, pager, next, total, sizes, jumper, slot'
      },
      // 每页显示条数
      size: {
        type: Number,
        default: 10
      },
      // 当前页码
      curr: {
        type: Number,
        default: 1
      },
      // 每页显示个数选择器的选项设置
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 30, 50, 100]
        },
      }
    },
    methods: {
      sizeChange(val) {
        this.$emit('callback', {curr: this.curr, size: val});
      },
      currChange(val) {
        this.$emit('callback', {curr: val, size: this.size});
      },
    }
  }
</script>

<style scoped lang="less">
  .el-pagination {
    margin-top: 24px;
    width: 100%;
    text-align: center;
    .sure {
      margin-left: 8px;
      color: #606266;
    }
    .el-pagination__sizes {
      .el-select {
        width: auto;
      }
      .el-input__inner {
        height: 28px;
      }
      .el-select__caret {
        line-height: 26px;
      }
    }
  }
</style>
